﻿p,a,b,span,div,h1,h2,h3,h4,h5,h6,button{
    font-family: 'microsoft yahei';
}
/*导航条样式*/
.modal-backdrop{z-index:0;}
a.navbar-brand{
    padding:0;
}
a.navbar-brand>img{
    height:90%;
    margin-top:5%;
}
nav.navbar-inverse{
    font-weight:bold;
    background-color:#2f2f2f;
}
input.form-control{
    font-weight:normal;
}
nav.navbar-inverse .navbar-nav>li>a:active{
    background-color:#343434;
}
.navbar-nav>li>.dropdown-menu>li>a{
    padding-left:0;
    padding-right:0;
    text-align:center;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
    background-color:#5BC0F1;
}
.has-feedback .form-control{
    padding-left: 30px;
}
.form-control-feedback{
    left:0;
}
span.bgMusic{
    font-size:25px;
    color:#00bfff;
    display:inline-block;
    position:relative;
    top: 7px;
    left: 10px;
    cursor:pointer;
    width:25px;
}
/*登录注册*/
#loginPage p{
    display:none;
    color:red;
}
#registerPage p{display:none;}
#userInformation{
    color:#fff;
    display:none;
}
#userInformation>b{
    color:deepskyblue;
}
button.exit{display:none;}
/*主体部分*/
section>div.container{
    margin-top:70px;
    opacity:0;
}
section>div.container>div:first-child{
    margin:1.5% 0 1.5% 0;
}
section>div.container div.heroDetail{
    text-align: center;
}
section>div.container div.heroDetail p{
    display:inline-block;
    font-size:1.5em;
    font-style:italic;
    position:relative;
    cursor:default;
}
section>div.container div.heroDetail p:after{
    content:"";
    width:0%;
    padding-left:0;
    height:1px;
    left:50%;
    bottom:-3px;
    position:absolute;
    background:#EAB212;
    transition:all 0.3s linear;
}
section>div.container div.heroDetail p:hover:after{
    left:0;
    width:100%;
}
section>div.container div.heroDetail button.floatSky{
    position:relative;
    top:0em;
    left:0em;
    font-size:1em;
    padding-left:10%;
    padding-right:10%;
    margin-left:5.3%;
    margin-bottom:20px;
    transition:font-size .25s linear;
}
section>div.container div.heroDetail button.floatSky:hover{
    font-size:1.2em;
    cursor:default;
}
section div.skinSort{
    height:105px;
    position:relative;
}
section div.skinSort img{
    display:none;
    position:absolute;
    left:50%;
    transform:translate(-50%);
}
section div.skinSort img:first-child{
    display:block;
}
section>div.container div.heroDetail a.btn{
    display:block;
    margin-left:12.5%;
    margin-top:20px;
    position:relative;
    color:#fff;
    overflow:hidden;
}
section>div.container div.heroDetail a.btn>strong{
    position:relative;
}
section>div.container div.heroDetail a.btn:hover{
    color:#EAB212;
}
section>div.container div.heroDetail a.btn:before{
    content:"";
    position:absolute;
    display:block;
    left:0;
    top:0;
    width:130%;
    height:100%;
    background:deepskyblue;
    transform:translate(-110%,0) skew(-40deg);
    transition:all 0.25s ease-out;
}
section>div.container div.heroDetail a.btn:hover:before{
    transform:translate(-15%,0) skew(-40deg);
}
div.heroMotto img{
    margin:0 auto;
}
div.out{
    perspective:1000px;
}
div.image{
    position:relative;
    transform-style:preserve-3d;
    transition:transform .5s linear;
}
div.image>img{
    float:left;
    position:absolute;
    display:block;
}
div.banner>img{
    position:absolute;
    display:none;
    width:25px;
    height:45px;
    transform:translateY(-50%);
}
div.banner>img:hover{
    cursor:pointer;
}
img.leftR{
    left:0;
    top:50%;
}
img.rightR{
    right:0;
    top:50%;
}
/*英雄格言*/
div.heroMotto>p{
    margin:20px auto;
    font-size:20px;
    text-shadow:1px 1px 1px;
}
div.heroMotto>button{
    display:none;
    margin:3px 0;
}
div.heroMotto>button:hover{
    color:#EAB212;
}
section{
    margin-bottom:50px;
}
/*底部英雄选择，底部宣传图样式*/
footer>div{
    height:200px;
    border-bottom:1px solid #000;
    border-top:1px solid #000;
    overflow:hidden;
    cursor:pointer;
    position:relative;
}
/*未完成的英雄设计遮罩层*/
footer>div.incomplete:before{
    font-size:20px;
    color:#fff;
    content:'客官勿慌喔,小提莫去种';
    text-align:right;
    line-height:200px;
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:50%;
    height:100%;
    background:rgba(0,0,0,.6);
    transform:translate(-100%);
    transition:transform .5s ease-out ;
}
footer>div.incomplete:hover:before{
    transform:translate(0%);
}
footer>div.incomplete:after{
    font-size:20px;
    color:#fff;
    content:'蘑菇了,还没回来.....';
    text-align:left;
    line-height:200px;
    display:block;
    position:absolute;
    right:0;
    top:0;
    width:50%;
    height:100%;
    background:rgba(0,0,0,.6);
    transform:translate(100%);
    transition:transform .5s ease-out ;
}
footer>div.incomplete:hover:after{
    transform:translate(0%);
}
/*英雄图片选择样式*/
footer>div>img{
    display:block;
    margin-top:-150px;
    margin-left:20%;
    height:500px;
    transition:all 0.8s ease-out;
}
footer>div{
    -webkit-transition: background .7s linear;
    -moz-transition: background .7s linear;
    -ms-transition: background .7s linear;
    -o-transition: background .7s linear;
    transition: background .7s linear;
}
footer>div:hover{
    background:#E8E8E8;
}
footer>div:hover>img{
    margin-left:0;
    height:600px;
}
footer>div:first-child>img{
    margin-top:-150px;
}
/*底部结尾页*/
div.footerImage{
    margin-top:50px;
    position:relative;
}
div.footerImage>img{
    width:100%;
    position:absolute;
}
div.footerImage>img.footerLine{
    transform:translateY(-46%);
}
div.footerImage>img.footerTitle{
    width:20%;
    left:50%;
    transform:translate(-50%);
}
div.footerImage>img.footerStory{
    width:65%;
    left:50%;
    transform:translate(-50%) translateY(45%);
}
/*回到顶部*/
#toTop{
    font-size:40px;
    color:#eee;
    text-align:center;
    padding:8px 5px 2px 5px;
    border-radius:5px;
    background:rgba(0,0,0,.5);
    position:fixed;
    right:2%;
    top:85%;
    cursor:pointer;
    transition:background .3s linear;
    display:none;
}
#toTop:hover{
    background:rgba(0,0,0,.8);
}
/*canvas*/
canvas{
    position:absolute;
}
/*屏幕变化改变css的样式*/
@media screen and (min-width: 993px){
    div.middleScreen{display:block;}
    div.smallScreen{display:none;}
}
@media screen and (max-width: 992px){
    div.middleScreen{display:none;}
    div.smallScreen{display:block;}
}
@media screen and (max-width: 632px){
    footer>div:first-child>img{
        margin-left:-30%;
    }
    footer>div:last-child>img{
        margin-left:-90%;
    }
}
